h3 Todo List
  button.pull-right.btn.btn-danger(ng-click='clearAll()') Clear All Items
  small Keeping track of tasks

.table-grid.todo
  .col.col-lg
    .pr-lg

      form(ng-submit='addTodo(todo)').mb-xl
        .form-group
          input.form-control(ng-trim="true", type='text', ng-model='todo.title', placeholder='Task title..', required)
        .form-group
          textarea.form-control(ng-trim="true", ng-model='todo.description', placeholder='Type a description..', rows="8")
        
        button.btn.btn-primary.btn-block(type='submit') {{editingTodo ? 'Edit Todo' : 'Add Todo'}}

  .col.todo-item-list
    .lead.text-muted.text-center(ng-show='!items.length') No tasks...
    accordion(close-others="true")
      accordion-group.todo-item(ng-repeat='item in items', ng-class="{'todo-complete': item.complete}", is-disabled="item.complete")
        accordion-heading
          span.close(ng-click='removeTodo($index, $event)') ×
          .inline.checkbox.c-checkbox
            label(ng-click="$event.stopPropagation()")
              input(type='checkbox', ng-model='item.complete', id="{{'todo-item-'+$index}}", ng-disabled="editingTodo")
              span.fa.fa-check
          span.todo-title(ng-bind='item.todo.title') Task title
          span.todo-edit.fa.fa-pencil(ng-click="editTodo($index, $event)")
        p
          span(ng-bind='item.todo.description') 
          span.text-muted(ng-if="item.todo.description === ''") No item description
    
    p.text-right(ng-if="items.length > 0")
      span {{ totalCompleted() }} Completed
      | - 
      span {{ totalPending() }} Pending
